<template>
  <div class="txmap">
    <div class="msg">
      <div class="content"></div>
      <div class="close">X</div>
    </div>
  </div>
</template>

<script>
// function loadScript() {
//   var script = document.createElement("script");
//   script.type = "text/javascript";
//   script.src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";
//   document.body.appendChild(script);
// }
 
// window.onload = loadScript;
export default {
  data() {
    return {
      //状态值地图，对象
      map: {},
    };
  },
  methods: {
    init() {
      var myLatlng = new qq.maps.LatLng(32.041805, 118.784134);
      var myOptions = {
        zoom: 11,
        center: myLatlng,
        mapTypeId: qq.maps.MapTypeId.ROADMAP,
      };
      this.map = new qq.maps.Map(document.querySelector(".txmap"), myOptions);
    },
    //创建标记
    createMarker() {
      //自定义标记
      var anchor = new qq.maps.Point(6, 6),
        size = new qq.maps.Size(24, 24),
        origin = new qq.maps.Point(0, 0),
        icon = new qq.maps.MarkerImage(
          "https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/center.gif",
          size,
          origin,
          anchor
        );

      //创建覆盖物  标记
      var marker = new qq.maps.Marker({
        icon: icon,
        position: new qq.maps.LatLng(
          31.14 + 1.22 * Math.random(),
          118.22 + 0.8 * Math.random()
        ),
        map: this.map,
      });

      //消息文本
      //随机生成消息
      let text = [
        "前方施工，道路拥堵",
        "前方发生事故",
        "山体发生泥石流",
        "多辆车追尾",
        "车辆超高，卡涵洞造成拥堵",
      ][Math.ceil(Math.random() * 4)];

      //添加标记 监听事件
      qq.maps.event.addListener(marker, "click", function (e) {
        console.log(e);
        let { x, y } = e.cursorPixel;
        //获取msg对象
        let msg_box = document.querySelector(".msg");
        msg_box.style.left = x + 10 + "px";
        msg_box.style.top = y - 25 + "px";
        //添加消息文本
        document.querySelector(".content").innerHTML = text;
        //消息盒子显示出来
        msg_box.style.display = "block";
        //添加关闭事件
        document.querySelector(".close").onclick = function () {
          msg_box.style.display = "none";
        };
      });

      //标记对象设置显示
      marker.setVisible(true);
    },
    //南京市中心  新街口  31°14″至32°37″，东经118°22″至119°14″
    //南京市中心位置：32.041805, 118.784134
    /*
     zoom：地图放大比例
     center:中心点
    */
  },
  created() {},
  mounted() {
    this.init();
    //模拟每个几秒地图上面发送一个拥堵消息标记
    setInterval(this.createMarker, 5000);
  },
};
</script>

<style lang="scss" scoped>
.txmap {
  width: 100%;
  height: 100%;
  position: relative;

  .msg {
    position: absolute;
    // width: 200px;
    height: 25px;
    line-height: 25px;
    border-radius: 10px;
    border: 1px solid rgb(224, 209, 209);
    z-index: 999;
    padding: 20;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
    display: none;
    .content {
      display: inline-block;
      font-size: 16px;
      color: rgb(93, 84, 84);
      //   width: 80%;
      //   border: 1px solid red;
    }
    .close {
      margin-left: 8px;
      display: inline-block;
      font-size: 18px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      //   width: 10%;
      border-radius: 50%;
      border: 1px solid #ccc;
      color: #fff;
      background: #cccc;
    }
  }
}
</style>
